<template>
	<view class="travelFavorite">
		<view class="travel-card" v-for="(travel,index) in porps.hotelFavorites" :key="travel.shop_id" @click="toShopDetails(travel.shop_id)">
			<image class="card-img" :src="imageUrl + travel.cover_image" mode="aspectFill"></image>
			<view class="card-right">
				<text class="title">{{travel.title}}  |  {{travel.subtitle}}</text>
				<text class="description">{{travel.description}}</text>
				<view class="price-box">
					<text class="price">￥{{travel.display_price}}</text>
					<text class="suffix">/起</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {imageUrl} from '@/config/request/request.js'
	import {ref,watchEffect} from 'vue';
	// import {onShow} from '@dcloudio/uni-app';
	const porps = defineProps({
		hotelFavorites: {
			type: Array,
			default: []
		}
	})
	
	watchEffect(() => {
		console.log('父组porps.hotelFavorites:', porps.hotelFavorites);
	});
	const toShopDetails = (shop_id) =>{
		uni.navigateTo({
			url:`/homeSubpages/ProductDetails/index?ShopId=${shop_id}`
		})
	}
</script>

<style lang="scss" scoped>
	.travelFavorite{
		width: 100%;
		height: 100%;
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		.travel-card{
			width: 100%;
			height: 240rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			.card-img{
				min-width: 40%;
				max-width: 40%;
				height: 100%;
				border-radius: 10rpx;
			}
			.card-right{
				min-width: 56%;
				max-width: 56%;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.title{
					-webkit-line-clamp: 2;
					line-height: 52rpx;
					font-weight: 600;
				}
				.description{
					-webkit-line-clamp: 1;
					font-size: 26rpx;
					color: #8a8a8a;
					// margin: 20rpx 0;
				}
				.price-box{
					text{
						display: inline;
						line-height: 52rpx;
					}
					.price{
						font-weight: 600;
						margin-right: 10rpx;
					}
					.suffix{
						color: #8a8a8a;
						font-size: 18rpx;
					}
				}
			}
		}
	}
</style>